<template>
  <div>

    <div class="library" v-if='!loading'>
      <header class="header">
        <div class="title">
          <span>面试宝典</span>
          <van-dropdown-menu class="dropdown"  close-on-click-outside>
            <van-dropdown-item class="dropdown-item" ref="item" :title='value' >
              <area-list :citys="citys" :indexList="indexList" @value="valueChange"/>
            </van-dropdown-item>
          </van-dropdown-menu>
       </div>
       <div class="scroll">

        <div class="buttonList" @click="check=true">
          <van-button class="van-button"  size="mini" :class="{defult:checkPosition===i}" round v-for="(item,i) in positionList" :key="item.id" @click="position(item.id,i)">{{item.name}}</van-button>
        </div>
       </div>
      </header>
    <main>
      <div class="topic">
          <div class="left">
            <div class="desc">
              <div class="icon" style="background-color: #ed6d69;"><i class="iconfont iconicon_mine_cuoti"/></div>
              <div>常错题库</div>
            </div>
            <div class="desc" @click="$router.push('/')">
              <div class="icon" style="background-color: #00b8d4;"><i class="iconfont iconicon_mine_qiyeshoucang" /></div>
              <div>企业题库</div>
            </div>
          </div>
          <div class="contain">

            <div class="center">
                <div>顺序刷题</div>
                <div>{{correctNum}}/{{totalCount}}</div>
                <!-- <img src="" alt=""> -->
            </div>
            <img class="img-cercle" src="@/assets/circleBg.dac5fdf3.png" alt="">

            <van-circle
              v-model="correct"
              :rate="rate"
              stroke-width="60"
              size="130px"
              color="rgba(213, 54, 73,0.6)"
              speed='20'
            />
          </div>
        <div class="right">
            <div class="desc">
              <div class="icon" style="background-color: #f4ba40;"><i class="iconfont iconicon_mine_tikushoucang"/></div>
              <div>收藏题库</div>
              </div>
            <div class="desc">
              <div class="icon" style="background-color: #61c888;"><i class="iconfont iconicon_mine_mianjing" /></div>
              <div>已答题库</div>
            </div>
       </div>
      </div>
      <div class="total">
        <div>累计收录</div>
        <div>{{totalCount}}</div>
      </div>
      <van-button class="bottom" color="#00b8d4" @click="doTest">模拟面试</van-button>
    </main>
    </div>
    <van-loading v-else size="40px" vertical>加载中...</van-loading>
  </div>
</template>

<script>
import AreaList from './components/AreaList.vue'
import { cityListAPI } from '@/api/exercise'
// import { getToken } from '@/utils/storage'
export default {
  components: { AreaList },
  name: 'libraryView',
  data () {
    return {
      rate: 0,
      value: '全国',
      check: false,
      //  进度条
      correct: 0,
      citys: [],
      indexList: [],
      totalCount: 0,
      correctNum: 0,
      positionList: [],
      cityPositions: {},
      positionId: 0,
      index: 0,
      checkPosition: 0,
      loading: false
    }
  },
  async created () {
    // this.loading = true
    const res = await cityListAPI()
    this.totalCount = res.data.totalCount
    this.cityPositions = res.data.cityPositions
    // console.log(this.$store.state.library, '取值')
    this.correctNum = this.$store.state.library.userInfo.correctQuestions.length
    this.rate = this.correctNum / this.totalCount * 100
    // console.log(res.data.citys, '城市')
    // console.log(res.data.cityPositions, '城市')
    const list = []
    for (const key in res.data.citys) {
      const obj = {}
      obj[key] = res.data.citys[key]
      // console.log(obj)
      list.push({ alp: key, citys: res.data.citys[key] })
      const alphabetList = []
      for (let i = 0; i < 26; i++) {
        alphabetList.push(String.fromCharCode(65 + i))
      }
      // console.log()
      this.indexList = list.map(v => alphabetList.find(j => j === v.alp))
      // console.log(this.indexList)
    }
    this.citys = [...list]
    // console.log(this.citys)
    // console.log(this.cityPositions[this.value])
    this.positionList = this.cityPositions[this.value]
    this.positionId = this.positionList[0].id
    this.loading = false
  },
  methods: {
    valueChange (v) {
      this.value = v
      this.positionList = this.cityPositions[v]
      this.$refs.item.toggle()
      this.index = 0
      this.checkPosition = 0
    },
    async position (id, i) {
      this.positionId = id
      this.index = i
      this.checkPosition = i
    },
    async doTest () {
      this.$router.push(`/question/${this.value}/${this.positionId}`)
    }

  }

}
</script>

<style lang='less' scoped>
::v-deep .van-loading--vertical {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 70% auto;
}
::v-deep .van-dropdown-menu__item{
  align-items: end;
}
::v-deep .van-dropdown-menu__bar{
  height: 30px;
}
.header {
  width: 100%;
  height: 100px;
  box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
  .title {
    line-height: 55px;
    height: 48px;
    font-size: 18px;
    text-align: center;
    .dropdown {
      display: inline-block;
      font-size: 12px;
    }
  }
  ::v-deep .van-dropdown-menu__bar{
    box-shadow:none;
  }
  ::v-deep .van-dropdown-menu__title{
      font-size: 12px;
  &::after {
      border-color: transparent transparent #de4f65 #de4f65;
      }

  }
  .scroll{

    .buttonList {
      overflow: scroll;
      padding: 10px;
      display: flex;
      flex-wrap: nowrap;
      >.van-button {
        flex-shrink: 0;
        padding: 10px;
        color: gray !important;
        background-color: #f6f4f5;
      }
      >.defult{
        background-color: rgb(0, 184, 212);
        color: #fff !important;
        }
    }
  }
}
.topic {
  height: 240px;
  display: flex;
  justify-content: space-between;
  padding: 10px 40px;
  // position: relative;
  .icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    .iconfont {
      font-size: 25px;
    }

  }
  .desc {
    font-size: 12px;

  }
  .left,.right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .contain {
    flex: 1;
    // margin-top: 50px;
    position: relative;
    .img-cercle {
      position: absolute;
      width: 130px;
      height: 130px;
      top: 45px;
      left: 50%;
      transform: translate(-50%);
      z-index: 1;
    }
    .van-circle {
      position: absolute;
      top:45px;
      left: 50%;
      transform: translate(-50%);
    }
    .center {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background-image: linear-gradient(to bottom ,#ea6f89 ,#d43243);
      font-size: 18px;
      color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,50%);
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
.total {
  height: 100px;
  font-size: 28px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.bottom {
  display: block;
  border-radius: 10px;
  margin: 30px auto;
  width: 330px;
  height: 50px;

}
.dropdown-item {
  width: 100%;
  padding: 10px;
  height: 10px;
  text-align: left;
}

</style>
